let echarts = require('echarts/lib/echarts')
// 引入折线图组件
require('echarts/lib/chart/line')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')
require('echarts/lib/component/title')

// 基于准备好的dom，初始化echarts实例
export function initChart (id) {
  const myChart = echarts.init(document.getElementById(id))
  return myChart
}
// 折线图 chartInstance：图表实例
export function drawLine (chartInstance, xData, yData) {
  // 绘制图表
  // let xAxis = {type: 'category', boundaryGap: false, data: xData}
  chartInstance.setOption({
    color: ['#6067F1', '#0f9d58', '#db4437', '#282baf', '#af9d28'],
    tooltip: {
      trigger: 'axis',
      confine: true
    },
    grid: {
      top: '37px',
      left: '40px',
      right: '40px',
      bottom: '32px',
      containLabel: true
    },
    dataZoom: {
      show: true
    },
    xAxis: {
      data: xData,
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      boundaryGap: [100, 100]
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#000000'
      },
      axisLine: {
          lineStyle: {
              color: '#BFBFBF'
          }
      }
    },
    series: [{
      type: 'line',
      data: yData,
      color: ['#6067F1'],
      symbolSize: 1,
      lineStyle: {
        width: 1
      }
    }]
  })
  return chartInstance
}

// 柱状图 chartInstance：图表实例
export function drawBar (chartInstance, xData, yData) {
  // 绘制图表
  // let xAxis = {type: 'category', boundaryGap: false, data: xData}
  chartInstance.setOption({
    color: ['#6067F1', '#0f9d58', '#db4437', '#282baf', '#af9d28'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: "{b} <br> 任务时长: {c}小时"
    },
    grid: {
      top: '37px',
      left: '40px',
      right: '40px',
      bottom: '32px',
      containLabel: true
    },
    dataZoom: {
      show: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.02]
    },
    yAxis: {
      type: 'category',
      data: yData,
      axisLabel: {
        show: true,
        interval: 0,
        rotate: 0,
        margin: 10,
        inside: false,
        textStyle: {
            //color: '#fff',
            fontWeight: '50'
        }
      }
    },
    series: [{
      type: 'bar',
      label: {
        normal: {
          show: true,
          position: 'right'
        }
      },
      barMaxWidth: 20,
      data: xData
    }]
  })
  return chartInstance
}

// 折线图堆叠-任务 chartInstance：图表实例
export function drawTaskLine (chartInstance, xData, successData, failureData) {
  // 绘制图表
  // let xAxis = {type: 'category', boundaryGap: false, data: xData}
  chartInstance.setOption({
    color: ['#67c23a', '#f56c6c', '#db4437', '#282baf', '#af9d28'],
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      bottom: 'bottom',
      data:[
        {
          name: '成功任务数',
          textStyle: {
            color: '#67c23a'
          }
        },
        {
          name: '失败任务数',
          textStyle: {
            color: '#f56c6c'
          }
        }
      ]
    },
    grid: {
      top: '37px',
      left: '40px',
      right: '40px',
      bottom: '40px',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    dataZoom: {
      show: true
    },
    xAxis: {
      data: xData,
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '成功任务数',
        type: 'line',
        symbolSize: 1,
        lineStyle: {
          color: '#67c23a',
          width: 1
        },
        data: successData
      },
      {
        name:'失败任务数',
        type:'line',
        symbolSize: 1,
        lineStyle: {
          color: '#f56c6c',
          width: 1
        },
        data: failureData
      }
    ]
  })
  return chartInstance
}

// 折线图堆叠-GPU chartInstance：图表实例
export function drawResourceGPULine (chartInstance, xData, yData1, yData2) {
  // 绘制图表
  // let xAxis = {type: 'category', boundaryGap: false, data: xData}
  chartInstance.setOption({
    color: ['#6067F1', '#12744b', '#db4437', '#282baf', '#af9d28'],
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      bottom: 'bottom',
      data:[
        {
          name: 'GPU利用率',
          textStyle: {
            color: '#6067F1'
          }
        },
        {
          name: 'GPU分配率',
          textStyle: {
            color: '#12744b'
          }
        }
      ]
    },
    grid: {
      top: '37px',
      left: '40px',
      right: '40px',
      bottom: '40px',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    dataZoom: {
      show: true
    },
    xAxis: {
      data: xData,
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'GPU利用率',
        type: 'line',
        symbolSize: 1,
        lineStyle: {
          color: '#6067F1',
          width: 1
        },
        data: yData1
      },
      {
        name:'GPU分配率',
        type:'line',
        symbolSize: 1,
        lineStyle: {
          color: '#12744b',
          width: 1
        },
        data: yData2
      }
    ]
  })
  return chartInstance
}
